<template>
  <div class="jingxuan">
    <div class="top">
      <lunbo :pro="bannerdata.banners"></lunbo>
    </div>
    <div class="content" >
      <div class="content-item" >
        <van-grid :column-num="5" :border="false">
          <van-grid-item
            v-for="(v1, i1) in shortCut"
            :icon="v1.cover"
            :text="v1.name"
            :key="i1"
          />
        </van-grid>
      </div>

      <div class="content-box">
        <card :list="contentData"/>
      </div>
    </div>
  </div>
</template>

<script>
import lunbo from "../components/lunbo.vue";
import Card from './components/card.vue';
export default {
  name: "jingxuan",
  data() {
    return {
      bannerdata: [],
      shortCut:[],
      canshu: {},
      contentData: [],
    };
  },
  components: {
    lunbo,
    Card,
  },
  created() {
    this.canshu = this.$route.params;
    this.getContent();
    // if(data.length != 0 ){
    //   console.log(1111);
    // }
    // console.log(data);
    // this.getContent(data)
  },
  methods: {
    getContent() {
      this.axios({
        method: "get",
        url: `/store/show.json`,
        // query:{
        //   type:this.navi[this.active].type,
        //   uuid:this.navi[this.active].uuid
        // }
      })
        .then((result) => {
          // console.log(result);
          this.bannerdata = result.data.data.list[0];
          this.shortCut = result.data.data.list[1].shortCut;
          this.contentData = result.data.data.list.slice(2)

          // console.log(this.contentData);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.content{
  background-color: #fff;
}
.content-item {
  padding: 0px 10px;
}
/deep/.van-grid-item__content--center{
  padding: 5px 0px;
  // background-color: red;
}
</style>